import { useState } from 'react';
import { TemplateList } from '@/components/template/TemplateList';
import { FileUploadStep } from '@/components/template/FileUploadStep';
import { PreviewStep } from '@/components/template/PreviewStep';
import { ImportSummary } from '@/components/template/ImportSummary';
import { TemplateProvider } from '@/contexts/template';

export default function TemplateImportPage() {
    const [viewMode, setViewMode] = useState<'import' | 'list'>('import');
  const [step, setStep] = useState(1);

  const handleNext = () => setStep(prev => Math.min(prev + 1, 3));
  const handleBack = () => setStep(prev => Math.max(prev - 1, 1));

    // 子步骤 Tab（仅导入视图使用）
  const tabs = [
    { id: 'upload', label: '上传模板', step: 1 },
    { id: 'preview', label: '预览', step: 2 },
    { id: 'import', label: '导入', step: 3 },
  ];

  const handleTabClick = (tabStep: number) => {
    if (tabStep <= step) {
      setStep(tabStep);
    }
  };

    const primaryTabs: { id: 'import' | 'list'; label: string }[] = [
    { id: 'import', label: '模板导入' },
    { id: 'list', label: '已上传模板' },
  ];

  return (
    <TemplateProvider>
      <div className="container mx-auto p-6 max-w-6xl">
        {/* 顶部主 tabs */}
        <div className="mb-8">
          <div className="flex border-b border-gray-200">
            {primaryTabs.map(tab => (
              <button
                key={tab.id}
                onClick={() => setViewMode(tab.id as 'import' | 'list')}
                className={`px-4 py-2 text-sm font-medium border-b-2 min-h-[44px] ${
                  viewMode === tab.id
                    ? 'border-blue-500 text-blue-600'
                    : 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
                }`}
              >
                {tab.label}
              </button>
            ))}
          </div>
        </div>
        {viewMode === 'import' && (
          <>

        <div className="mb-8">
          <div className="flex border-b border-gray-200">
            {tabs.map((tab) => (
              <button
                key={tab.id}
                onClick={() => handleTabClick(tab.step)}
                className={`px-4 py-2 text-sm font-medium ${
                  step === tab.step
                    ? 'border-b-2 border-blue-500 text-blue-600'
                    : 'text-gray-500 hover:text-gray-700 hover:border-gray-300'
                } ${
                  tab.step > step ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'
                }`}
                disabled={tab.step > step}
              >
                {tab.label}
              </button>
            ))}
          </div>
        </div>
        {viewMode === 'import' && (
          <h1 className="text-2xl font-bold text-slate-900 mb-8">检查项模板导入</h1>
        )}
        
        <div className="bg-white rounded-lg shadow-sm p-6">
          {/* Progress Steps */}
          <div className="flex justify-between mb-8 relative">
            {[1, 2, 3].map((stepNumber) => (
              <div key={stepNumber} className="flex flex-col items-center relative z-10">
                <div 
                  className={`w-10 h-10 rounded-full flex items-center justify-center mb-2 ${
                    step >= stepNumber 
                      ? 'bg-primary text-white' 
                      : 'bg-slate-100 text-slate-500'
                  }`}
                >
                  {stepNumber}
                </div>
                <span className="text-sm text-slate-600">
                  {['上传/添加', '预览', '导入'][stepNumber - 1]} 
                </span>
              </div>
            ))}
            <div className="absolute top-5 left-0 right-0 h-0.5 bg-slate-200 -z-0">
              <div 
                className="h-full bg-primary transition-all duration-300" 
                style={{ width: `${step * 33.33}%` }}
              />
            </div>
          </div>

          {/* Content */}
          <div className="space-y-4">
            {step === 1 && <FileUploadStep onNext={handleNext} />}
            {step === 2 && <PreviewStep onNext={handleNext} onBack={handleBack} />}
            {step === 3 && <ImportSummary onBack={() => setStep(1)} />}
          </div>
        </div>
          </>
        )}

        {viewMode === 'list' && (
          <>
            <h1 className="text-2xl font-bold text-slate-900 mb-8">已上传模板列表</h1>
            <div className="bg-white rounded-lg shadow-sm p-6">
              <TemplateList />
            </div>
          </>
        )}
      </div>
    </TemplateProvider>
  );
}
